<template>
  <div>
    <div class="header">
      <div @click="goBack" class="back">
        <van-icon name="arrow-left" style="margin-bottom:2px" />返回
      </div>
      <div class="title">
        发票抬头
      </div>
      <div class="blank"></div>
    </div>
    <div class="body">
      <van-form @submit="onSubmit">
        <van-field v-model="form.name" name="名称" label="名称" placeholder="名称" />
        <van-field v-model="form.num" type="text" name="税号" label="税号" placeholder="税号" />
        <van-field v-model="form.address" type="text" name="单位地址" label="单位地址" placeholder="单位地址" />
        <van-field v-model="form.phone" type="text" name="电话号码" label="电话号码" placeholder="电话号码" />
        <van-field v-model="form.bank" type="text" name="开户银行" label="开户银行" placeholder="开户银行" />
        <van-field v-model="form.acount" type="text" name="银行账号" label="银行账号" placeholder="银行账号" />
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">保存</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        num: "",
        address: "",
        phone: "",
        bank: "",
        acount: "",
      },
    };
  },
  created() {
    this.$toast(JSON.parse(this.$route.params.data))
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onSubmit() {
      this.$toast.success("提交数据");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  color: #fff;
  background-color: #07c160;
  text-align: center;
  display: flex;
  .back{
    flex: 1.5;
  }
  .title{
    flex: 8;
  }
  .blank{
    flex: 1.5;
  }
}
</style>